<template>
  <Modal :value.sync="isShow" title="编辑权限" :footer-hide="true" :mask-closable="false" @on-cancel="changeNo">
    <Form label-position="right" :label-width="100" :model="rowData" :rules="rules">
      <FormItem label="用户名：" prop="title">
        <Input v-model="rowData.title"></Input>
      </FormItem>
        <!-- 树型控件 -->
      <FormItem label="权限分配：">
       <el-tree :data="treeData" :show-checkbox="true" node-key="id" ref="tree" highlight-current :props="defaultProps" :default-checked-keys="keyArr"></el-tree>
        <!-- <Tree ref="tree" :data="treeInfo" show-checkbox children-key="points" :expand-node="true"></Tree> -->
      </FormItem>
    </Form>
    <Row type="flex" justify="center">
      <Button style="margin-right: 10px" @click="cancelBth">取消</Button>
      <Button type="info" @click="confirmBtn">确认</Button>
    </Row>
  </Modal>
</template>

<script>
import { update } from '@/api/base/permissions'
import { menusList } from '@/api/base/menus.js'

export default {
  name: 'usersAdd',
  props: {
    isShow: {
      type: Boolean
    },
    rowData: {
      type: Object
    },
    treeInfo: {
      type: Array
    },
    keyArr: {
      type: Array
    }
  },
  async created () {
    const { data } = await menusList()
    // this.treeData = data
    // console.log(data)
    // this.treeData = this.tranListToTreeData(data)
    this.treeData = data.map(item => {
      return { points: item.childs, code: item.code, id: item.id, pid: item.pid, title: item.title }
    })
    console.log(this.treeData)
    console.log(data)
  },
  data () {
    return {
      treeData: [],
      rules: {
        title: [{ required: true, message: '用户名不能为空', trigger: 'blur' }]
      },
      defaultProps: {
        children: 'points',
        label: 'title'
      }
    }
  },
  methods: {
    // 取消
    cancelBth () {
      this.$refs.tree.setCheckedKeys([])
      this.$emit('update:isShow', false)
    },
    // 确认
    async confirmBtn () {
      const res = this.$refs.tree.getCheckedKeys()
      console.log(res)
      await update({ id: this.rowData.id, title: this.rowData.title, permissions: res })
      this.$refs.tree.setCheckedKeys([])
      this.$emit('update:isShow', false)
    },
    changeNo () {
      this.$emit('update:isShow', false)
    },
    // 使用递归算法转树型图
    tranListToTreeData (list) {
      var arr = []
      list.forEach(item => {
        // console.log(rootValue)
        // console.log(item)
        if (item.childs) {
          // 找到之后 就要去找 item 下面有没有子节点
          // console.log(children)
          // console.log(item.childs)
          item.childs.forEach(key => {
            // console.log(key)
            key.childs = key.points
            // console.log(key)
          })
        }
        arr.push(item) // 将内容加入到数
      })
      return arr
    }
  }
}
</script>

<style>
</style>
